<template>
  <div class="header-container flex self-start align-items-center border-box">
    <div class="header-left flex justify-content-center align-items-center">
      <el-button :icon="ArrowLeft" circle size="small" @click="goHome" />
    </div>
    <div class="header-center flex align-items-center space-between pl-15 pr-15">

    </div>
    <div class="header-right flex justify-content-center align-items-center">
      <el-avatar :size="30" :src="avatar"></el-avatar>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();


const goHome = () => {
  router.push('/');
}

const avatar = ref('https://image.baidu.com/search/detail?ct=503316480&z=0&tn=baiduimagedetail&ipn=d&cl=2&cm=1&sc=0&sa=vs_ala_img_datu&lm=-1&ie=utf8&pn=2&rn=1&di=7531461114744274945&ln=0&word=%E5%A4%B4%E5%83%8F&os=1924858073,13810735&cs=865726124,3629441446&objurl=http%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F3b292df5e0fe9925d3bb44d026a85edf8cb171fe&bdtype=0&simid=3312152477,178119049&pi=0&adpicid=0&timingneed=&spn=0&is=1924858073,13810735&lid=fe912b5d000d7b95');

</script>
<style scoped lang="scss">
.header-container {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid var(--border-color);

  .header-left {
    width: 60px;
    height: 100%;
  }

  .header-center {
    flex: 1;
    height: 100%;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  .header-right {
    width: 80px;
    height: 100%;
  }
}
</style>